<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生ajax post请求</title>
</head>
<body>
  <div class="box"></div>
</body>
<style>
  .box {
    width: 200px;
    height: 100px;
    border: 1px solid;
  }
</style>
<script>
  // 获取元素对象
  const box = document.getElementsByClassName('box')[0]
  // 绑定事件
  box.addEventListener('mouseover', function (){
    // 1. 创建对象
    const xhr = new XMLHttpRequest()
    // 2. 初始化 设置请求类型和url
    xhr.open('POST', 'http://127.0.0.1:8000/server')
    // 设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 使用自定义请求头时，需要在响应头中设置response.setHeader('Access-Control-Allow-Headers', '*')，并将post改为all
    xhr.setRequestHeader('name', 'atguigu')
    // 3. 发送
    xhr.send('a=100&b=200&c=300') // 参数一般使用json或string用&拼接格式
    // 4. 事件绑定
    xhr.onreadystatechange = function(){
      // 判断服务端返回所有结果
      if(xhr.readyState === 4){
        // 判断相应状态码，2开头都是成功
        if(xhr.status >= 200 && xhr.status < 300){
          // 处理结果
          box.innerHTML = xhr.response
        }
      }
    }
  }) 
</script>
</html>